import React, { Component } from 'react'

export default class TabC extends Component {
  //state里面存放内容，都跟页面渲染有关系
  state = {
    title:"新人券"
  }
  addTask = ()=>{
    console.log(this.titleElement);
    console.log(this.titleElement.value);
    console.log(this.receiveTypeElement);
    console.log(this.receiveTypeElement.value);
    console.log(this.stateElement.checked);
    console.log(this.stateElement2.checked);
  }
  render() {
    const {title} = this.state
    return (
      <div>
        <h2>TabC</h2>
        <div className='item'>
          <label htmlFor="">优惠券名字：</label>
          <input ref={element=>this.titleElement = element} defaultValue={title} name='title' type="text" placeholder="请输入名字" />
          
        </div>
        <div className='item'>
          <label htmlFor="">优惠券价格：</label>
          <input name='price' type="text" placeholder="请输入名字" />
        </div>
        <div className='item'>
          <label htmlFor="">优惠券类型：</label>
          <select name="receiveType" ref={element=>this.receiveTypeElement=element}>
            <option value="1">通用券</option>
            <option value="2">商品券</option>
            <option value="3">新人券</option>
          </select>
        </div>
        <div className='item'>
          <span>状态：</span>
          <label htmlFor="">开启</label>
          <input name='state' ref={element=>this.stateElement=element} type="radio"  value="1" />
          <label htmlFor="">关闭</label>
          <input name='state' ref={element=>this.stateElement2=element} type="radio"  value="0" />
        </div>
        {/* 自己先实现 */}
        <div className='item'>
          <span>学历：</span>
          <label htmlFor="">本科</label>
          <input type="checkbox" value="bk" />
          <label htmlFor="">专科</label>
          <input type="checkbox" value="zk" />
        </div>
        <div>
          <button onClick={this.addTask}>添加</button>
        </div>
      </div>
    )
  }
}
